<template>
  <div style="margin-top: 10px">
    <Echart
            :options="options"
            id="bottomLeftChart"
            height="300px"
            width="100%"
    ></Echart>
  </div>
</template>

<script>
  import Echart from '@/common/echart'
  const labelOption = {
    show: true,
    //position:'insideBottom',
    position:'insideTop',
    distance: 60,
    align: 'center',
    verticalAlign:'middle',
    rotate: 90,
    color:'white',
    //formatter: '{a}  {c}%',
    formatter: '{c}%',
    fontSize: 16,
    rich: {
      name: {}
    }
  };
  export default {
    data () {
      return {
        options: {},
      };
    },
    components: {
      Echart,
    },
    props: {
      cdata: {
        type: Object,
        default: () => ({})
      },
      showValue:{
        type:Boolean,
        default:true
      }
    },
    watch: {
      showValue:{
        handler(newValue){
          labelOption.show=newValue
        },
        immediate: true
      },
      cdata: {
        handler (newData) {
          //console.log(newData)
          //let valueFormatter=(val)=> val+"%"
          let tooltip= {
            trigger: 'item', formatter:function (parms){
              console.log(parms)
              var str = parms.marker+""+ parms.data.name+"</br>"+
                  "不良率："+ parms.data.value+"%</br>"+
                  "占比："+ parms.percent+"%";
              return  str ;
            }
          };
          //build data
          //data: [{ value: 12.35, name: '前段AOI' }];
          let data=[];
          let idx=newData.aoi1Data.length-1
          if (newData.aoi1Data[idx]&&newData.aoi1Data[idx]<100){
            data.push({value:(100-newData.aoi1Data[idx]).toFixed(2),name:'前段AOI'})
          }
          if (newData.aoi2Data[idx]&&newData.aoi2Data[idx]<100){
            data.push({value:(100-newData.aoi2Data[idx]).toFixed(2),name:'后段AOI'})
          }
          if (newData.ate1Data[idx]&&newData.ate1Data[idx]<100){
            data.push({value:(100-newData.ate1Data[idx]).toFixed(2),name:'初测ATE'})
          }
          if (newData.ate2Data[idx]&&newData.ate2Data[idx]<100){
            data.push({value:(100-newData.ate2Data[idx]).toFixed(2),name:'终端ATE'})
          }
          if (newData.volData[idx]&&newData.volData[idx]<100){
            data.push({value:(100-newData.volData[idx]).toFixed(2),name:'自动耐压'})
          }
          this.options = {
            title: {
              text: '品质实时不良占比',
              //subtext: '2023-03-08',
              left: 'center',
              textStyle :{color: 'lightgreen'},
            },
            tooltip: tooltip,
            /*legend: {
              orient: 'vertical',
              left: 'left'
            },*/
            series: [
              {
                name: '不良率',
                type: 'pie',
                radius: '60%',
                //重点
                label : {
                  normal : {
                    formatter:function (params) {
                      //console.log(params,ticket);
                      return params.name+'\n('+params.value+'%)'+':'+params.percent+'%';
                    },
                    textStyle : {
                      fontWeight : 'normal',
                      fontSize : 15
                    }
                  }
                },
                data: data,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          }
        },
        immediate: true,
        deep: true
      },
    },
  }

</script>

<style lang="scss" scoped>
$box-height: 100%;
$box-width: 100%;
</style>
